<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="UTF-8" />
        <title>Data lineage view</title>
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <script src="jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
        <script src="sqlflow.widget.3.6.2.js"></script>
        <script src="samplesql.js"></script>
        <script>
            var sqlflow;
            const visualize = async (showType) => {
                let data = {};
                data.dbVendor = $("#dbvendor").val();
                data.sqlText = sqlflow.sqltext.get();
                let options = [];
                $("input[name='setting']:checked").each(function (index, item) {
                    options.push($(this).val());
                });
                data.ignoreRecordSet = false;
                data.showConstantTable = false;
                data.simpleShowFunction = false;
                data.indirect = false;
                data.tableLevel = false;
                data.showTransform = false;
                for(let op of options){
                    if(op=='ignoreRecordSet'){
                        data.ignoreRecordSet = true;
                    }
                    if(op=='simpleShowFunction'){
                        data.simpleShowFunction = true;
                    }
                    if(op=='showConstantTable'){
                        data.showConstantTable = true;
                    }
                    if(op=='indirect'){
                        data.indirect = true;
                    }
                    if(op=='tableLevel'){
                        data.tableLevel = true;
                    }
                    if(op=='showTransform'){
                        data.showTransform = true;
                    }
                }
                let showResultSetTypes = [];
                $("input[name='showResultSetTypes']:checked").each(function (index, item) {
                    showResultSetTypes.push($(this).val());
                });
                if(showResultSetTypes.length>0){
                    data.showResultSetTypes = showResultSetTypes.join(",");
                }
                if(showType=='JSON'){
                    $.ajax({
                        url : "sqlflow/datalineage/json",
                        type : "POST",
                        data : JSON.stringify(data),
                        dataType : 'json',
                        contentType : 'application/json;charset=UTF-8',
                        success : function(result) {
                            if(result.code != 200){
                                alert(result.msg);
                                return;
                            }
                            $("#reslutcode").text(result.data);
                        }
                    });
                }
                else if(showType=='XML'){
                    $.ajax({
                        url : "sqlflow/datalineage/xml",
                        type : "POST",
                        data : JSON.stringify(data),
                        dataType : 'json',
                        contentType : 'application/json;charset=UTF-8',
                        success : function(result) {
                            if(result.code != 200){
                                alert(result.msg);
                                return;
                            }
                            $("#reslutcode").text(result.data);
                        }
                    });
                }
                else if(showType=='CSV'){
                    $.ajax({
                        url : "sqlflow/datalineage/csv",
                        type : "POST",
                        data : JSON.stringify(data),
                        dataType : 'json',
                        contentType : 'application/json;charset=UTF-8',
                        success : function(result) {
                            if(result.code != 200){
                                alert(result.msg);
                                return;
                            }
                            $("#reslutcode").text(result.data);
                        }
                    });
                }
                else{
                    $.ajax({
                        url : "sqlflow/datalineage",
                        type : "POST",
                        data : JSON.stringify(data),
                        dataType : 'json',
                        contentType : 'application/json;charset=UTF-8',
                        success : function(result) {
                            if(result.code != 200){
                                alert(result.msg);
                                return;
                            }
                            let data = JSON.parse(result.data);
                            sqlflow.visualizeJSON(data, { layout: true });
                        }
                    });
                }

            };

            const visualizeER = async () => {
                let data = {};
                data.dbVendor = $("#dbvendor").val();
                data.sqlText = sqlflow.sqltext.get();
                $.ajax({
                    url : "sqlflow/erdiagram",
                    type : "POST",
                    data : JSON.stringify(data),
                    dataType : 'json',
                    contentType : 'application/json;charset=UTF-8',
                    success : function(result) {
                        if(result.code != 200){
                            alert(result.msg);
                            return;
                        }
                        sqlflow.visualizeERJSON(JSON.parse(result.data), { layout: true });
                    }
                });
            };

            const dbvendorChange= async () => {
                let vendor = $("#dbvendor").val();
                sqlflow.vendor.set(vendor);
                sqlflow.sqltext.set(sampleSQL[vendor]);
                visualize('image');
            };

            const getFormatChange= async () => {
                let format = $("#format").val();
                $("#showTextResultLabel").text(format);
            };
            const getDataLineage= async () => {
                let format = $("#format").val();
                visualize(format);
            };
            const showDataLineage= async () => {
                let format = $("#format").val();
                if(format=='CSV'){
                    visualize('image');
                    return
                }
                let data = {};
                data.dbVendor = $("#dbvendor").val();
                data.text = sqlflow.sqltext.get();
                data.format = format;
                $.ajax({
                    url : "sqlflow/showDataLineage",
                    type : "POST",
                    data : JSON.stringify(data),
                    dataType : 'json',
                    contentType : 'application/json;charset=UTF-8',
                    success : function(result) {
                        if(result.code != 200){
                            alert(result.msg);
                            return;
                        }
                        sqlflow.visualizeJSON(JSON.parse(result.data), { layout: true });
                    }
                });
            };

            document.addEventListener('DOMContentLoaded', async () => {
                $("#ignoreRecordSetcheckbox").attr("checked","checked");
                sqlflow = await SQLFlow.init({
                    container: document.getElementById('sqlflow'),
                    width: '100%',
                    height: '100%',
                    apiPrefix: '',
                    component: {
                        sqlEditor: true,
                        graphLocate: true,
                        minimap: true,
                    },
                });
                sqlflow.vendor.set("dbvoracle");
                sqlflow.sqltext.set(sampleSQL.dbvoracle);
                visualize('image');
            });
        </script>
        <style>
            html, body {
                width: 100%;
                height: 100%;
            }
            .full {
                height: 100%;
                width: 100%;
            }
            * {
                margin: 0;
                padding: 0;
            }
            .top {
                margin: 8px;
            }
        </style>
    </head>

    <body>
        <div class="full">
            <form class="form-inline top">
                <div class="form-group">
                    <label for="dbvendor">dbvendor: </label>
                    <select id="dbvendor" class="form-control  input-sm" onchange="dbvendorChange()">
                        <option value="dbvathena">athena</option>
                        <option value="dbvazuresql">azuresql</option>
                        <option value="dbvbigquery">bigquery</option>
                        <option value="dbvcouchbase">couchbase</option>
                        <option value="dbvdatabricks">databricks</option>
                        <option value="dbvdb2">db2</option>
                        <option value="dbvgaussdb">gaussdb</option>
                        <option value="dbvgreenplum">greenplum</option>
                        <option value="dbvhana">hana</option>
                        <option value="dbvhive">hive</option>
                        <option value="dbvimpala">impala</option>
                        <option value="dbvinformix">informix</option>
                        <option value="dbvmdx">mdx</option>
                        <option value="dbvmysql">mysql</option>
                        <option value="dbvmssql">mssql</option>
                        <option value="dbvnetezza">netezza</option>
                        <option value="dbvopenedge">openedge</option>
                        <option value="dbvoracle" selected>oracle</option>
                        <option value="dbvpostgresql">postgresql</option>
                        <option value="dbvpresto">presto</option>
                        <option value="dbvredshift">redshift</option>
                        <option value="dbvsnowflake">snowflake</option>
                        <option value="dbvsparksql">sparksql</option>
                        <option value="dbvsybase">sybase</option>
                        <option value="dbvteradata">teradata</option>
                        <option value="dbvvertica">vertica</option>
                    </select>
                </div>
                <button type="button" class="btn btn-default btn-sm" style="margin-left: 8px" data-toggle="modal" data-target="#settingID">
                    Setting
                </button>
                <button type="button" class="btn btn-default btn-sm" style="margin-left: 8px" data-toggle="modal" data-target="#showResultSetTypesID">
                    Show ResultSet Types
                </button>
                <button type="button" class="btn btn-primary" style="margin-left: 8px" onclick="visualize('image')">visualize data lineage</button>
                <button type="button" class="btn btn-success" style="margin-left: 8px" onclick="visualizeER()">visualize ER diagram</button>
                <label for="format" style="margin-left: 16px">format: </label>
                <select id="format" class="form-control input-sm" onchange="getFormatChange()">
                    <option value="JSON">JSON</option>
                    <option value="CSV">CSV</option>
                    <option value="XML">XML</option>
                </select>
                <button onclick="getDataLineage()"  type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#showTextResultModal">fetch</button>
                <button onclick="showDataLineage()"  type="button" class="btn btn-primary btn-sm" >visualize with format</button>
                <span style="float: right; margin-right: 8px"><a target="_blank" href="https://github.com/sqlparser/java_data_lineage/blob/main/README_cn.md">帮助</a></span>
                <span style="float: right; margin-right: 8px"><a target="_blank" href="https://github.com/sqlparser/java_data_lineage/blob/main/README.md">Help</a></span>
            </form>
            <div id="sqlflow"></div>

        </div>

        <!-- Modal -->
        <div class="modal fade" id="settingID" tabindex="-1" role="dialog" aria-labelledby="settingModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <span class="h4 modal-title" id="settingModalLabel">Setting</span>
                        <span style="float: right; margin-right: 8px"><a target="_blank" href="https://github.com/sqlparser/java_data_lineage/blob/main/README_cn.md#note2">帮助</a></span>
                        <span style="float: right; margin-right: 8px"><a target="_blank" href="https://github.com/sqlparser/java_data_lineage/blob/main/README.md#note2">Help</a></span>
                    </div>
                    <div class="modal-body" style="font-size: 16px">
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input name="setting" type="checkbox" value="indirect" onclick="visualize('image')"> indirect
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="setting" type="checkbox" value="simpleShowFunction" onclick="visualize('image')"> show function
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="setting" type="checkbox" value="showConstantTable" onclick="visualize('image')"> show constant
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="setting" type="checkbox" value="showTransform" onclick="visualize('image')"> show transform
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input id="ignoreRecordSetcheckbox" name="setting" type="checkbox" value="ignoreRecordSet" onclick="visualize('image')"> ignoreRecordSet
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="setting" type="checkbox" value="tableLevel" onclick="visualize('image')"> table level
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="showResultSetTypesID" tabindex="-1" role="dialog" aria-labelledby="showResultSetTypesModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <span class="h4 modal-title" id="showResultSetTypesModalLabel">Show ResultSet Types</span>
                        <span style="float: right; margin-right: 8px"><a target="_blank" href="https://github.com/sqlparser/java_data_lineage/blob/main/README_cn.md#note3">帮助</a></span>
                        <span style="float: right; margin-right: 8px"><a target="_blank" href="https://github.com/sqlparser/java_data_lineage/blob/main/README.md#note3">Help</a></span>
                    </div>
                    <div class="modal-body" style="font-size: 16px">
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input name="showResultSetTypes" type="checkbox" value="result_of" onclick="visualize('image')"> result_of
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="showResultSetTypes" type="checkbox" value="cte" onclick="visualize('image')"> cte
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="showResultSetTypes" type="checkbox" value="insert_select" onclick="visualize('image')"> insert_select
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="showResultSetTypes" type="checkbox" value="update_select" onclick="visualize('image')"> update_select
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="showResultSetTypes" type="checkbox" value="merge_update" onclick="visualize('image')"> merge_update
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="showResultSetTypes" type="checkbox" value="merge_insert" onclick="visualize('image')"> merge_insert
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="showResultSetTypes" type="checkbox" value="update_set" onclick="visualize('image')"> update_set
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="showResultSetTypes" type="checkbox" value="pivot_table" onclick="visualize('image')"> pivot_table
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="showResultSetTypes" type="checkbox" value="unpivot_table" onclick="visualize('image')"> unpivot_table
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="showResultSetTypes" type="checkbox" value="rs" onclick="visualize('image')"> rs
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="showResultSetTypes" type="checkbox" value="function" onclick="visualize('image')"> function
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="showResultSetTypes" type="checkbox" value="case_when" onclick="visualize('image')"> case_when
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="showTextResultModal" tabindex="-1" role="dialog" aria-labelledby="showTextResultLabel">
            <div class="modal-dialog" role="document" style="width: 80%">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <span class="h4 modal-title" id="showTextResultLabel">JSON</span>
                    </div>
                    <div class="modal-body" style="font-size: 16px">
                        <textarea id="reslutcode" style="width: 100%" rows="20"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>